1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
import Link from "next/link";
import { ArticleLoader } from "../../../../util/articleLoader";
import dateformat from "dateformat";
import { createPagenation } from "../../../../util/pagenation";
import { ArticleListElement } from "../../_components/articleListElement";
dateformat.i18n.dayNames = [
'日', '月', '火', '水', '木', '金', '土',
'日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'
];
type PageType = {
searchParams: Record<string, string>,
params: {
pageId: string,
}
}
export async function generateMetadata(context: PageType) {
const pageId = getPageIdNumber(context.params.pageId);
return {
title: `アキバ総研アーカイブ：ページ ${pageId}`,
}
}
export default async function Page(context: PageType) {
const pageId = getPageIdNumber(context.params.pageId);
const loadedData = await ArticleLoader.instance.loadData();
const chunkdData = chunk(loadedData, PPV);
const displayData = chunkdData[pageId - 1];
return (
<div className="p-1 gap-16">
{pagenationElement(pageId, chunkdData.length)}
<div className="text-right">全:{loadedData.length}件</div>
{ArticleListElement(displayData)}
{pagenationElement(pageId, chunkdData.length)}
</div>
);
}
function pagenationElement(now: number, max: number) {
const pagenationData = createPagenation({ now: now, max: max, between: 2 });
const liElements: JSX.Element[] = [];
for (const v of pagenationData) {
if (v.type == "back") {
if (v.link == null) {
liElements.push(
<li key={v.key}>
<span className="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
<span className="sr-only">Previous</span>
<svg className="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
</svg>
</span>
</li>
);
} else {
liElements.push(
<li key={v.key}>
<Link href={`/article/all/page-${v.link}`} className="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
<span className="sr-only">Previous</span>
<svg className="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
</svg>
</Link>
</li>
);
}
} else if (v.type == "next") {
if (v.link == null) {
liElements.push(
<li key={v.key}>
<span className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
<span className="sr-only">Next</span>
<svg className="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
</svg>
</span>
</li>
);
} else {
liElements.push(
<li key={v.key}>
<Link href={`/article/all/page-${v.link}`} className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
<span className="sr-only">Next</span>
<svg className="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
</svg>
</Link>
</li>
);
}
} else if (v.type == "num") {
if (v.link == null) {
if (v.num == now) {
liElements.push(
<li key={v.key}>
<span
className="z-10 flex items-center justify-center px-4 h-10 leading-tight text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white"
>{v.num}</span>
</li>
);
} else {
liElements.push(
<li key={v.key}>
<span
className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
>{v.num}</span>
</li>
);
}
} else {
liElements.push(
<li key={v.key}>
<Link
href={`/article/all/page-${v.link}`}
className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
>{v.num}</Link>
</li>
);
}
} else if (v.type == "sp") {
<li key={v.key}>
<span
className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
>...</span>
</li>
}
}
return (
<nav className="flex justify-center pt-10">
<ul className="flex items-center -space-x-px h-10 text-base">
{liElements}
</ul>
</nav>
);
}
function getPageIdNumber(pageIdStr: string) {
const m = pageIdStr.match(/page-(\d+)/)!;
const id = Number(m[1]);
return id;
}
const PPV = Number(process.env["AKIBA_SOUKEN_AR_ITEM_PPV"] ?? "100");
if (!Number.isInteger(PPV)) {
throw new Error(`AKIBA_SOUKEN_AR_ITEM_PPVに整数をセットして下さい`);
}
//export const dynamicParams = true;
export async function generateStaticParams() {
const loadedData = await ArticleLoader.instance.loadData();
const chunkdData = chunk(loadedData, PPV);
return chunkdData.map((data, index) => {
return { pageId: `page-${index + 1}`, data: data };
});
}
function chunk<T = any>(list: T[], len: number) {
if (len <= 0) {
throw new Error();
}
const result: T[][] = [];
for (let i = 0; i < list.length; i += len) {
result.push(list.slice(i, i + len));
}
return result;
}
|
